<template>
  <div>

  <div class="fl fanhui" @click="this.$router.back()"><el-icon><Back /></el-icon></div>
  <div class="container">
    <div class="item-details">
      <div class="image-container">
        <div class="big-image-wrapper relative">
          <button @click="prevImage" class="image-nav-btn prev-btn" :disabled="currentImageIndex === 0">
            <el-icon><ArrowLeft /></el-icon>
          </button>
          <div class="big-image">
            <img :src="currentImage" alt="会议室图片" style="width: 400px;height: 400px;">
          </div>
          <button @click="nextImage" class="image-nav-btn next-btn" :disabled="currentImageIndex === item.imageUrls.length - 1">
            <el-icon><ArrowRight /></el-icon>
          </button>
        </div>
        <div class="thumbnail-wrapper relative">
          <button @click="prevImage" class="thumbnail-btn prev-btn" >
            <el-icon><ArrowLeft /></el-icon>
          </button>
          <div class="thumbnail-images">
            <img
              v-for="(image, index) in visibleThumbnails"
              :key="index"
              :src="image"
              alt="缩略图"
              @click="changeImage(index + (currentPage - 1) * itemsPerPage)"
              :class="{ active: index + (currentPage - 1) * itemsPerPage === currentImageIndex }"
            >
          </div>
          <button @click="nextImage" class="thumbnail-btn next-btn" >
            <el-icon><ArrowRight /></el-icon>
          </button>
        </div>
      </div>
      <div class="info-container">
        <h2>{{ item.name }}</h2>
        <p><strong>描述:</strong> {{ item.description }}</p>
        <p><strong>容纳人数:</strong> {{ item.capacity }}人</p>
        <p><strong>面积:</strong> {{ item.area }}㎡</p>
        <p><strong>地址:</strong> {{ item.location }}</p>
        <p><strong>多媒体设备:</strong> {{ item.equipments }}</p>
        <p><strong>价格:</strong> {{ item.pricePerHour }}元/小时</p>
        <p><strong>类型:</strong> {{ item.type === 'classroom' ? '教室型' : '圆桌型' }}</p>
        <button @click="dialogVisible=true">立即预定</button>
      </div>
    </div>
  </div>
  <el-dialog v-model="dialogVisible" title="请填写需求">
    <el-form :model="orderForm" label-width="120px">
      <el-form-item label="参会人数">
        <el-input v-model="orderForm.attendeeCount" />
      </el-form-item>
      <el-form-item label="开始时间">
        <el-date-picker
            v-model="orderForm.startTime"
            type="datetime"
            placeholder="请选择开始时间"
            value-format="YYYY-MM-DD HH:mm:ss"
        />
      </el-form-item>
      <el-form-item label="结束时间">
        <el-date-picker
           v-model="orderForm.endTime"
           type="datetime"
           placeholder="请选择开始时间"
           value-format="YYYY-MM-DD HH:mm:ss"
         />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="dialogVisible = false">取消</el-button>
      <el-button type="primary" @click="handleOrder()">去支付</el-button>
    </template>
  </el-dialog>
  </div>
</template>

<script>
import axios from 'axios';
import { Back,ArrowLeft,ArrowRight } from '@element-plus/icons-vue';
import { ElMessageBox } from 'element-plus'; 
export default {
  data() {
    return {
      item: {
        id: null,
        name: '',
        description: '',
        equipments:'',
        area:'',
        pricePerHour:'',
        type: '',
        location:'',
        imageUrls: []
      },
      currentImageIndex: 0,
      currentPage: 1,
      itemsPerPage: 5,
      isLoggedIn: false,
      username: '',
      avatarPath: '',
      isTextareaFocused: false,
      errorMessage: '',
      isFavorite: false,
      favoriteNum: '',
      orderForm:{},
      dialogVisible:false,
    };
  },
  components:{
     Back,
     ArrowLeft,
     ArrowRight,
  },
  created() {
    // 检查本地存储中是否有登录信息
    const token = localStorage.getItem('token');
    console.log(token);
    const storedUsername = localStorage.getItem('username');
    console.log(storedUsername);
    if (token && storedUsername) {
      this.isLoggedIn = true;
      this.username = storedUsername;
    }
  },
  computed: {
    currentImage() {
      return this.item.imageUrls[this.currentImageIndex];
    },
    visibleThumbnails() {
      const startIndex = (this.currentPage - 1) * this.itemsPerPage;
      const endIndex = startIndex + this.itemsPerPage;
      return this.item.imageUrls.slice(startIndex, endIndex);
    },
    totalPages() {
      return Math.ceil(this.item.imageUrls.length / this.itemsPerPage);
    }
  },
  mounted() {
    this.getDetail();
  },
  methods: {
    logout() {
        ElMessageBox({
        message: '确定要退出登录吗？',
        type: 'warning',
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        showCancelButton: true,
      }).then(()=>{
        localStorage.removeItem('token');
        localStorage.removeItem('username');
        this.isLoggedIn = false;
        this.username = '';
      }).catch(()=>{
        
      })
    },
    
    getDetail() {
      let id = this.$route.query.id;
      axios.get('/customer/room/detail/' + id)
        .then(res => {
          if (res.data.code === 200) {
            this.item = res.data.data;
          }
        })
        .catch(error => {
          console.error('获取物品信息失败:', error);
        });
    },
    changeImage(index) {
      this.currentImageIndex = index;
    },
    // 新增大图导航方法
    prevImage() {
      if (this.currentImageIndex > 0) {
        this.currentImageIndex--;
        this.updateCurrentPage(); // 更新当前页码
      }
    },
    nextImage() {
      if (this.currentImageIndex < this.item.imageUrls.length - 1) {
        this.currentImageIndex++;
        this.updateCurrentPage(); // 更新当前页码
      }
    },
    // 更新当前页码，确保当前图片在可见缩略图中
    updateCurrentPage() {
      const page = Math.floor(this.currentImageIndex / this.itemsPerPage) + 1;
      if (page !== this.currentPage) {
        this.currentPage = page;
      }
    },
    prevPage() {
        this.currentPage--;
    },
    nextPage() {
        this.currentPage++;
    },
    isPoster(id) {
      return id == localStorage.getItem('userId');
    },
    handleOrder(){
      this.orderForm.roomId=this.item.id;
      axios.post('/customer/reservation',this.orderForm).then(res=>{
        if(res.data.code===200){
          this.dialogVisible=false;
          this.$router.push({
                name: 'OrderDetailPage',
                query: {
                    id: res.data.data
                }
            });
        }else {
          this.$message.error(res.data.msg||'预订失败！')
        }
      })
    }
  }
};
</script>

<style scoped>
@import '../../assets/base.css';
@import '../../assets/index.css';
.big-image-wrapper {
  position: relative;
  margin-bottom: 15px;
}

.image-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition: background-color 0.3s;
  font-size: 20px;
}

.image-nav-btn:hover {
  background-color: rgba(0, 0, 0, 0.7);
}

.prev-btn {
  left: -10px;
}

.next-btn {
  right: -10px;
}

/* 缩略图区域样式 */
.thumbnail-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.thumbnail-btn {
  background-color: rgba(255, 255, 255, 0.8);
  /* border: 1px solid #ddd; */
  border-radius: 4px;
  padding: 8px;
  cursor: pointer;
  transition: background-color 0.3s;
  z-index: 10;
  flex-shrink: 0;
  font-size: 20px;
}

.thumbnail-btn:hover {
  background-color: #f5f5f5;
}

.thumbnail-images {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 5px 0;
  flex-grow: 1;
  scrollbar-width: none;
}

.thumbnail-images::-webkit-scrollbar {
  display: none;
}

.thumbnail-images img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border: 2px solid transparent;
  cursor: pointer;
  flex-shrink: 0;
}

.thumbnail-images img.active {
  border-color: #f00;
}
.fanhui {
  margin-left: 100px;
  margin-top: 20px;
  font-size: 25px;
  padding: 0px;
}
.fanhui:hover {
  background-color: #e7e7e7;
}
.container {
  width: 80%;
  margin: 0 auto;
  padding: 20px;
}

.item-details {
  border: 5px solid #ccc;
  border-radius: 5px;
  padding: 20px;
  margin-bottom: 20px;
  display: flex;
}

.image-container {
  width: 35%;
  margin-right: 20px;
}

.big-image {
  margin-bottom: 10px;
}

.big-image img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.thumbnail-images {
  width: 100%;
}

.thumbnail-images img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  margin-right: 5px;
  border: 2px solid transparent;
  cursor: pointer;
}

.thumbnail-images img.active {
  border-color: #f00;
}

.info-container {
  width: 65%;
  text-align: left;
  border-left: 3px solid #cfcfcf;
  padding-left: 20px;
}
.info-container button {
  width: 200px;
  padding: 10px;
  background-color: #118218;
  border-radius: 10px;
  color: #fff;
  font-weight: 700;
  font-size: 18px;
}
.info-container button:hover {
  transform: scale(1.05);
  background-color: #1c9a25;
}
.iconfont {
  float: right;
  font-family: "iconfont" !important;
  font-size: 20px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  cursor: default;
}

.iconfont span {
  font-size: 16px;
  color: #6c6c6c;
}

.fill-color {
  color: #f00;
  fill: #f00;
}

.info-container h2 {
  font-size: 25px;
  margin-bottom: 50px;
}

.info-container p {
  font-size: 18px;
  color: #9d9d9d;
  margin-bottom: 20px;
}
.error-message {
  color: red;
  font-size: 12px;
  margin-top: 5px;
}

</style>    